{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    <div class="pos-f l0 t0 r0">
        <div id="header" style="" class="pos-r bcf bdbso">
            <div class="c11 tac fs10 flrc">
                <div class="pad5 pos-r fs12">
                    <span class="fa fa-angle-left padr10 op9"></span>
                    <mu-ripple @click="goback()"></mu-ripple>
                </div>
                <div class="flex1 tal pad10 tac">选择城市</div>
{#                <mu-button @click="pickBack()" flat color="success"><span class="fwb">拾取</span></mu-button>#}
            </div>
        </div>
    </div>
    <div class="pad10">&nbsp;</div>

    <div class="pad5 fs8 c12 mart5">
        <div class="flrc">
            <div>自动定位：</div>
            <div class="flex-r flex1 c11 fwb pos-r">
                <div v-if="isTrue(city)" class="pos-r bdso round3 padt5 padb3 lh15 padlr7"  @click="setCity(city)"><mu-ripple>[[ city ]]</mu-ripple></div>
                <span v-if="!isTrue(city)">定位中</span>
            </div>
            <div class="">
                <span @click="getLocation()">不能定位？点击重试。</span>
            </div>
        </div>
    </div>


    <div class="pad5 fs8 lh2">
        <div v-for="group in list">
            <div class="bc13 c11 padtb5 padl10">[[group.name]]</div>
            <div class="bdtso padtb3 flex-r flex-wrap flex-start">
                <div style="width: 32%" class="pad2" v-for="item in group.cities">
                    <div class="tac bdso round3 ofe pos-r pad3"><mu-ripple @click="setCity(item.name)">[[item.name]]</mu-ripple></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block myJs %}
{#    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Kiuik0qMrnwy3tBNzXLZzIGyH59eh6Rm"></script>#}
    <script src="{{ root }}/js/baidumap.js"></script>
    <script>
        function getPosInfo(lat, lon, func) {
            var point = new BMap.Point(lon, lat);
            var geoc = new BMap.Geocoder();
            geoc.getLocation(point, function (res) {
                func(res)
            });
        }
    </script>
{% endblock %}
